우측 패널 (Data)

생성일: 2026년 9월 9일 오전 10:54

우측 패널 구조 이해하기

우측 속성 패널은 선택한 요소의 스타일과 동작을 설정하는 영역입니다.
선택한 컴포넌트 종류에 따라 설정 가능한 항목이 변경됩니다.

우측 패널 구성

탭	설명
Style	디자인 및 레이아웃 설정
Animation	인터랙션 및 모션 설정
Data	데이터 연결 설정

3. 데이터 바인딩 이해하기

바인딩 선택 기준

1. 변수 바인딩：고정된 단일 값을 화면에 넣을 때 사용합니다.
2. 상품 바인딩：상품 카드나 상품 목록을 만들 때 사용합니다.
3. 카테고리 바인딩：카테고리 메뉴나 카테고리 목록을 만들 때 사용합니다.

1. 변수 바인딩

용도	한 위치에 하나의 값이 들어가는 요소(텍스트,이미지,링크 등)를 미리 정의된 플렉스지 변수와 연결할 때 사용합니다．
적용 방법	1) 캔버스에서 해당 요소를 선택합니다．
2) 우측 패널에서 데이터 바인딩 버튼 을 클릭합니다．
3) 변수 목록에서 텍스트，이미지，링크 타입에 맞는 변수를 선택하여 연결합니다．
4) 연결 후 레이어에서 해당 아이콘을 확인할 수 있습니다．

예시

이미지 바인딩 예시

1. 요소 선택
2. 바인딩 팝오버 오픈
3. 변수 리스트 오픈
4. 변수 선택
5. 바인딩 적용

---

2. 상품 바인딩

용도	상품 카드, 추천 상품, 상품 목록 등 상품 데이터가 반복되는 영역에 사용합니다.
필드 연결	카드 내 이미지(상품 대표 이미지), 이름(상품명), 가격(상품 판매가), 상세 이동(상품 상세화면 URL)을 각각 필드에 매칭합니다.
적용 방법	1) 반복할 상품 카드 하나를 선택합니다.
2) 우측 데이터 탭 > 데이터 소스 영역으로 이동하여 상품 데이터를 선택합니다.
3) 전체 상품, 특정 카테고리, 추천 상품 등 목적에 맞는 기준을 선택하고 반복 적용 버튼으로 적용합니다.

상품 바인딩 예시

🎥상품 바인딩 동영상 보러가기

1. 반복할 카드 선택
2. 우측 패널 > 데이터 탭 접근
3. 반복할 데이터 카테고리 선택
4. 반복 적용

💡Tip. 상품 반복 옵션 설정하기

---

3. 카테고리 바인딩

용도	메뉴, 사이드바, 카테고리별 상품 진입 영역 등 카테고리 정보 표시 영역에 사용합니다.
필드 연결	카테고리명, 링크를 각각 연결합니다.

카테고리 바인딩 예시

🎥 [카테고리 선택, 상위 항목 하위] 카테고리 바인딩 동영상 보러가기

🎥 [현재 URL 하위] 카테고리 바인딩 동영상 보러가기

• 카테고리 정렬 컨테이너
  • 반복 컨테이너 (1depth)
    • 카테고리 바인딩 텍스트
    • 반복 컨테이너 (2depth)
      • 카테고리 바인딩 텍스트
      • 반복 컨테이너 (3depth)
        • 카테고리 바인딩 텍스트

💡Tip 1. 카테고리 기본 바인딩 방법

1. 카테고리 레이어를 구성합니다.
2. 모든 텍스트에 카테고리 이름 변수를 바인딩합니다.
3. 카테고리 링크를 바인딩합니다.
   링크 섹션 > 유형 FLEXG 선택 > 변수 리스트 접근 > 카테고리 페이지 연결 변수 선택
4. 바인딩 적용 버튼 클릭

💡Tip 2. 1depth 카테고리 반복 적용 방법

1. 1depth를 감싸고 있는 컨테이너 선택
2. 우측 패널 > 데이터 탭
3. 데이터 소스 카테고리 선택
4. 카테고리 메뉴 탭 선택
5. 카테고리 선택 탭 선택
6. 전체 선택
7. 카테고리 메뉴 반복 적용

💡Tip 3. 2depth, 3depth 카테고리 반복 적용 방법

1. 2 depth/3depth 감싸고 있는 컨테이너 선택
2. 우측 패널 > 데이터 탭
3. 데이터 소스 상위 항목 하위 선택
4. 카테고리 메뉴 반복 적용

데이터 기준

• 현재 URL 하위: 현재 카테고리 바로 아래 메뉴를 보여줄 때 사용합니다.
  (ex. 상품리스트 > 카테고리 메뉴)
• 카테고리 선택: 특정 상위 카테고리를 기준으로 고정 메뉴를 만들 때 사용합니다.
• 상위 항목 하위: 상위 카테고리 반복 영역 안에서 자식 카테고리를 펼칠 때 사용합니다.